<template>
    <h3>新增电影</h3>
    <div class="movieCol">
        <label for="">电影名称:</label><input type="text" name="" id="" v-model.lazy="addMovieInfo.name">
    </div>
    <div class="movieCol">
        <label for="">电影类型:</label>
        <template v-for="item in moviesType" :key="item._id">
            <input type="checkbox" :value="item.name" v-model="addMovieInfo.types" id="moviesType">
            <label for="moviesType">{{ item.name }}</label>
        </template>

    </div>
    <div class="movieCol">
        <label for="">制片国家:</label>
        <select name="" id="" v-model="addMovieInfo.country">
            <option :value="item.name" v-for="item in countries">{{ item.name }}</option>
        </select>
    </div>
    <div class="movieCol">
        <label for="">上映年份:</label>
        <input type="text" v-model="addMovieInfo.year">
    </div>
    <div class="movieCol">
        <label for="">播放时长:</label>
        <input type="text" v-model="addMovieInfo.duration">
    </div>
    <div class="movieCol">
        <label for="">是否热映:</label>
        <input type="radio" name="isHot" v-model="addMovieInfo.hot" :value="1"><label for="">是</label>
        <input type="radio" name="isHot" v-model="addMovieInfo.hot" :value="0"><label for="">否</label>
    </div>
    <button @click="addMovieBtn()">确认新增</button>





    <!-- 电影修改 ---------------------------------------------------->
    <h3>修改电影</h3>
    <div class="movieCol">
        <label for="">电影名称:</label>
        <input type="text" name="" id="" v-model="updatedMovieInfo.name" value="">
    </div>
    <div class="movieCol">
        <label for="">电影类型:</label>
        <template v-for="item in moviesType" :key="item._id">
            <input type="checkbox" v-model="updatedMovieInfo.types" id="updatedType" :value="item.name">
            <label for="updatedType">{{ item.name }}</label>
        </template>

    </div>
    <div class="movieCol">
        <label for="">制片国家:</label>
        <select name="" id="" v-model="updatedMovieInfo.country">
            <option :value="item.name" v-for="item in countries">{{ item.name }}</option>
        </select>
    </div>
    <div class="movieCol">
        <label for="">上映年份:</label>
        <input type="text" v-model="updatedMovieInfo.year">
    </div>
    <div class="movieCol">
        <label for="">播放时长:</label>
        <input type="text" v-model="updatedMovieInfo.duration">
    </div>
    <div class="movieCol">
        <label for="">是否热映:</label>
        <input type="radio" name="" v-model="updatedMovieInfo.hot" value="1"><label for="">是</label>
        <input type="radio" name="" v-model="updatedMovieInfo.hot" value="0"><label for="">否</label>
    </div>
    <button @click="updatedBtn()">确认修改</button>

    <!-- 电影列表 ------------------------------------------------------------------->
    <h3>电影列表电影</h3>
    <table class="moviesListSelect">
        <tr>
            <td><input type="text" placeholder="请输入电影名称" v-model="selectByTerm.movieName"></td>
            <td><select name="" v-model="selectByTerm.movieCountry" >
                    <option :value="item.name" v-for="item in countries" :key="item._id">{{ item.name }}</option>
                </select></td>
            <td> <select name="" v-model="selectByTerm.movieType" >
                    <option :value="item.name" v-for="item in moviesType" :key="item._id">{{ item.name }}</option>
                </select></td>
            <td><button @click="selectedMovies=[...selectResult]">搜索</button></td>
        </tr>
    </table>
    <table class="moviesInfo">
        <thead>
            <tr>
                <th>编号</th>
                <th>电影名称</th>
                <th>电影类型</th>
                <th>制片国家</th>
                <th>上映年份</th>
                <th>时长</th>
                <th>热映</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in selectedMovies" :key="item._id">
                <td>{{ item._id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.types.join('/') }}</td>
                <td>{{ item.country }}</td>
                <td>{{ item.year }}</td>
                <td>{{ item.duration }}</td>
                <td :class="item.hot==1 ? 'hotStyle' : ''">{{ item.hot == 1 ? '是' : '否' }}</td>
                <!-- <td><button @click="updatedMovieInfo={...item}">修改</button><button @click="deleteMovie(item._id)">删除</button></td> -->
                <td><button @click="renderUpdatedData(item)">修改</button><button
                        @click="deleteMovie(item._id)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

<p>{{ updatedMovieInfo }}</p>
<GlobalComponent/>
</template>

<script setup>
import { computed, ref } from 'vue';
import GlobalComponent from '../Study(06-10)/GlobalComponent.vue';
const countries = ref([
    {
        "_id": "682d9655fa09000092007cb3",
        "name": "中国大陆"
    },
    {
        "_id": "682f3a9047bd398e5f05fd1d",
        "name": "中国香港"
    },
    {
        "_id": "682fdada47bd398e5f05fd1f",
        "name": "中国台湾"
    },
    {
        "_id": "68303b6647bd398e5f05fd41",
        "name": "美国"
    },
    {
        "_id": "682da00efa09000092007cb5",
        "name": "法国"
    },
    {
        "_id": "6830403b47bd398e5f05fd42",
        "name": "韩国"
    },
    {
        "_id": "682d9d6efa09000092007cb4",
        "name": "日本"
    },

])
const moviesType = ref([
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    }
])
const moviesData = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "duration": "83",
        "hot": 1,
        "types": [
            "动作",
            "科幻",
            "动画"
        ],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "score": "8.9",
        "duration": "134",
        "hot": 0,
        "types": [
            "动画",
            "奇幻",
            "冒险"
        ],
        "country": "日本",
        "year": "1997",
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "score": "8.9",
        "duration": "117",
        "hot": 1,
        "types": ["爱情"],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "duration": "112",
        "hot": 1,
        "types": [
            "喜剧",
            "恐怖"
        ],
        "country": '中国台湾',
        "year": "2024",
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "score": "7.3",
        "country": '韩国',
        "duration": "116",
        "hot": 0,
        "types": [
            "剧情", "传记"
        ],
        "year": "2025",
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "score": "7.0",
        "country": '中国大陆',
        "duration": "131",
        "hot": 1,
        "types": [
            "悬疑",
            "犯罪",
            "剧情"
        ],
        "year": "2025",
    }
])
const selectedMovies = ref(moviesData.value);
const selectByTerm = ref({
    movieName: '',
    movieCountry: '',
    movieType: ''
});
const addMovieInfo = ref({
    _id: new Date().getTime(),
    name: '',
    types: [],
    country: '',
    hot: '',
    duration: '',
    year: ''
})
const updatedMovieInfo = ref({
    _id: '',
    name: '',
    types: [],
    country: '',
    hot: '',
    duration: '',
    year: ''
});

const selectResult = computed(() => {
    return moviesData.value.filter(item => {
        const nameResult = item.name.includes(selectByTerm.value.movieName);
        const countryResult = selectByTerm.value.movieCountry ?  item.country == selectByTerm.value.movieCountry  : true;
        const typeResult = selectByTerm.value.movieType ?  item.types.includes(selectByTerm.value.movieType) : true;
        return nameResult && countryResult && typeResult;
    }) 
})

//修改
function renderUpdatedData(data) {
    data = JSON.parse(JSON.stringify(data));
    updatedMovieInfo.value = data;
}
function updatedBtn() {
    moviesData.value = moviesData.value.map(item => {
        if (item._id == updatedMovieInfo.value._id) {
            return updatedMovieInfo.value
        }
        return item
    })
    selectedMovies.value = moviesData.value;
    updatedMovieInfo.value = ref({
        _id: '',
        name: '',
        types: [],
        country: '',
        hot: '',
        duration: '',
        year: ''
    })
}
//修改按钮
function getAddMovieInfo(){
    
}

function addMovieBtn() {
    moviesData.value.push(addMovieInfo.value);
}




// //选择国家进行筛选
// function selectByCountry() {
//     selectedMovies.value = moviesData.value.filter(item => {
//         return (item.country == selectByTerm.value.movieCountry);
//     })
// }
// //选择类型进行筛选
// function selectByType() {
//     selectedMovies.value = moviesData.value.filter(item => {
//         return item.types.includes(selectByTerm.value.movieType);
//     })
// }
// //根据名字/国家和类型筛选
// function selectMoviesFoo() {
//     if (!selectByTerm.value.movieName) {
//         if (selectByTerm.value.movieCountry &selectByTerm.value.movieType) {
//             selectedMovies.value = moviesData.value.filter(item => {
//                 return (item.country == selectByTerm.value.movieCountry & item.types.includes(selectByTerm.value.movieType))
//             })
//         } 

//     } else if (selectByTerm.value.movieName) {
//         selectedMovies.value = moviesData.value.filter(item => {
//             return (item.name == (selectByTerm.value.movieName))
//         })
//     }
//  selectByTerm.value= ref([{
//     movieName: '',
//     movieCountry: '',
//     movieType: ''
// }])
// }
//删除
function deleteMovie(data) {
    selectedMovies.value = moviesData.value = moviesData.value.filter(item => {
        return item._id != data
    })
}
</script>

<style scoped>
* {
    outline: none;
}

table {
    text-align: center;
}

.moviesInfo {
    border: 1px solid;
}

.moviesInfo>thead>tr>th,
.moviesInfo>tbody>tr>td {
    border: 1px solid;

}

.moviesListSelect {
    border-collapse: collapse;
    font-size: 14px;
}

.moviesListSelect>tr>td:not(:last-child) {
    border: 1px solid;

}

.moviesListSelect input {
    width: 140px;
    border: none;
    outline: none;

}

.moviesListSelect select {
    width: 80px;
    border: none;
    outline: none;

}

.hotStyle {
    background-color: darkgoldenrod;
}
</style>